<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <link rel="icon" href="../img/image/suixun.ico" mce_href="../img/image/suixun.ico" type="image/x-icon">
    <link rel="shortcut icon" href="../img/image/suixun.ico" mce_href="../img/image/suixun.ico" type="image/x-icon">
    <title>随寻物联云平台</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/login.css" />
    <style type="text/css">
        @media only screen and (max-width: 1366px){
            .main .main-right .main-right-title span {
                font-size: 18px !important;
            }
        }
        .main .main-right .main-right-title span {
            margin: 40px 0px;
            font-size: 22px;
        }
        .main .main-right .main-right-username span img,.main .main-right .main-right-password span img {
            margin-left: 9px;
        }
    </style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript" src="../js/common.js" ></script>
<script type="text/babel">
    var userState = false,phoneCodeState = false;//帐号和密码验证状态
    var inputData = [
        {enable:false,img:'../img/icon/user.png',inputPhoneCode:'inputUser',verifyType:'userPhone',phoneCodeTime:'',divClass:'main-right-username',getPhoneCode:'',placeholder:'请输入手机号',inputType:'number',inputRef:'userName',inputName:'userName',method:0,phoneCodeClass:' phoneCodeHidden'},
        {enable:false,img:'../img/icon/verificationCode.png',verifyType:'userPhoneCode',inputPhoneCode:'inputPhoneCode',phoneCodeTime:'phoneCodeTime',divClass:'main-right-password getPhoneCode',getPhoneCode:'getPhoneCode',placeholder:'请输入短信验证码',inputType:'number',inputRef:'phoneCode',inputName:'phoneCode',method:1,phoneCodeClass:'phoneCode'}
    ];
    var titleData = {titleName:'忘记密码',imgClass:'imgHide'};
    var buttonData = {buttonName:'确定'};
    //头部
    var  Title = React.createClass({
        render: function(){
            return (
                    <div className="main-right-title">
                        <span><img className={this.props.imgClass} src="../img/image/logo.png" />{this.props.titleName}</span>
                    </div>
            );
        }
    });
    //表单
    var  Input = React.createClass({
        render: function(){
            return (
                    <div>
                        <div className={this.props.divClass}>
                            <span className="span-img"><img src={this.props.img} /></span>
                            <input type={this.props.inputType} readOnly={this.props.inputPhoneCode == "inputUser"?"":""} className={this.props.inputPhoneCode}  placeholder={this.props.placeholder}  ref={this.props.inputRef} name={this.props.inputName} onChange={this.props.onChangeMethod} onBlur={this.props.onBlurMethod}/>
                            <div className={this.props.phoneCodeClass}>
                                <div className="phoneCode-acquire" onClick={this.props.getPhoneCode}>获取验证码</div>
                            </div>
                            <div className="verify" ></div>
                            <div id={this.props.verifyType} className="errorMsg" ></div>
                        </div>
                    </div>
            );
        }
        //按钮
    });
    var Button = React.createClass({
        render: function () {
            return (
                    <div>
                        <div className="main-right-button">
                            <div id="chickLogin" onClick={this.props.buttonClickMethod}>{this.props.buttonName}</div>
                        </div>
                    </div>
            );
        }
    });
    //所有组件嵌套
    var Main = React.createClass({
        //button点击事件
        onSubmit: function () {
            console.log("点击button");
            //TODO 处理相关验证任务
            if(phoneCodeState && userState){
                window.location.href="updatePassword.html";
            }
            //验证用户获取的验证码是否正确
        },
        //文本框的点击事件
        onUserChange: function (e) {
            //TODO 处理相关验证任务
            var val = e.target.value;
            if(!(/^1[34578]\d{9}$/.test(val))){
//                $ ("#userPhone").html("手机号码格式错误!");
                $ ("#userPhone").show();
                userState = false;
                return false;
            }
            userState = true;
//            $("#userPhone").html("");
            $ ("#userPhone").hide();
        },
        //文本框失去焦点控制
        onUserBlur: function (e) {
            //TODO 处理相关验证任务
            var val = e.target.value;
            if(!(/^1[34578]\d{9}$/.test(val))){
//                $ ("#userPhone").html("手机号码格式错误!");
                $ ("#userPhone").show();
                userState = false;
                return false;
            }
            userState = true;
//            $("#userPhone").html("");
            $ ("#userPhone").hide();
        },
        //验证码框的点击事件
        onPhoneCodeChange: function (e) {
            var val = e.target.value;
            if(!(/^[012345789]\d{5}$/.test(val))){
//                $ ("#userPhoneCode").html("验证码格式错误!");
                $ ("#userPhoneCode").show();
                phoneCodeState = false;
                return false;
            }
            phoneCodeState = true;
//            $("#userPhoneCode").html("");
            $ ("#userPhoneCode").hide();
        },
        //验证码失去焦点判断
        onPhoneCodeBlur: function (e) {
            var val = e.target.value;
            if(!(/^[012345789]\d{5}$/.test(val))){
//                $ ("#userPhoneCode").html("验证码格式错误!");
                $ ("#userPhoneCode").show();
                phoneCodeState = false;
                return false;
            }
            phoneCodeState = true;
//            $("#userPhoneCode").html("");
            $ ("#userPhoneCode").hide();
        },
        //获取验证码
        getPhoneCode: function (e) {
            var phoneCodeAcquireVal = $(".phoneCode-acquire").html();
            if(phoneCodeAcquireVal != "获取验证码"){
                return false;
            }
            var userName = $(".inputUser").val(),
                phoneCode = $(".inputPhoneCode").val(),
                timeNumber = 120;
            if(userState){
                $(".phoneCode-acquire").addClass("grey");
                $(".inputUser").attr("readOnly",true);
                //倒计时
                var timer = setInterval(function () {
                    if(timeNumber > 0){
                        timeNumber--;
                        $(".phoneCode-acquire").html(timeNumber+" 秒");
                    }else{
                        $(".inputUser").attr("readOnly",false)
                        $(".phoneCode-acquire").removeClass("grey");
                        $(".phoneCode-acquire").html("获取验证码");
                        clearInterval(timer);
                    }
                },1000);
                //或者用本地存储 防止有人恶意刷短信:localStorage.timeNumber
                console.log('请求服务器获取验证码');
            }else{
                if(userName.length==0){
                    $ ("#userPhone").show();
                }else{
                    $ ("#userPhone").show();
                }
            }

        },
        getInitialState: function () {
            return {inputData:this.props.inputData,titleData:this.props.titleData,buttonData:this.props.buttonData}
        },
        render: function () {
            {
                var onChangeMethod = [this.onUserChange,this.onPhoneCodeChange],
                    onBlurMethod = [this.onUserBlur,this.onPhoneCodeBlur],
                    getPhoneCode = [this.getPhoneCode];
                //优先生成多个Input组件
                var Inputs =  this.state.inputData.map(function(data){
                    return(
                        //查看官方文档，使用map时需定义一个key变量
                            <Input key={data.inputName} divClass={data.divClass} img={data.img} phoneCodeTime={data.phoneCodeTime} getPhoneCode={getPhoneCode[0]} verifyType={data.verifyType} inputType = {data.inputType} inputPhoneCode={data.inputPhoneCode} placeholder={data.placeholder} inputRef={data.inputRef} onBlurMethod={onBlurMethod[data.method]} onChangeMethod={onChangeMethod[data.method]} phoneCodeClass={data.phoneCodeClass} />
                    );
                });
            }
            return (
                    <div>
                        <header>
                            <div id="time">
                            </div>
                        </header>
                        <div className="main">
                            <div className="main-middle">
                                <div className="main-left">
                                    <img src="../img/image/login_middle.png" />
                                </div>
                                <div className="main-right lowHeight">
                                    <Title titleName={this.state.titleData.titleName} imgClass={this.state.titleData.imgClass} />
                                    {Inputs}
                                    <Button buttonClickMethod={this.onSubmit} buttonName={this.state.buttonData.buttonName}  />
                                    <div className="main-right-forgetPassword"><a href="./login.html" style={{fontSize:"1rem",color:"#01b4ee"}}>返回登录</a></div>
                                </div>
                            </div>
                        </div>
                        <footer>
                            <div className="copyright">
                                <span><img src="../img/icon/copyright.png"/>Copyright 2015 杭州随寻科技有限公司 </span>
                            </div>
                            <div className="footer-rail above"></div>
                            <div className="footer-rail below"></div>
                        </footer>
                    </div>
            );
        }
    });
    ReactDOM.render(
            <Main  titleData={titleData} buttonData={buttonData} inputData={inputData} />,
        document.getElementById('login')
    );
</script>
</body>
</html>
